@boxRadius: 20%;
@ib: inline-block;

/* 元素顶部工具栏区域开始*/
.com-ele-toolbar {
 float: right;
  ul {
    li {
      list-style: none;
      display: @ib;
      margin-right: 15px;
      i {
        color: #c3c3c3;
      }
    }
  }
}
/* 元素顶部工具栏区域结束*/

// 公共ul li列表样式开始
.center-ele-list {
  // margin-top: 10px;
  height: 256px;
  overflow: auto;
  ul {
    overflow: hidden;
    height: 48px;
    padding-right: 10px;
    .li-float {
      display: @ib;
      float: left;
    }
    li {
      position: relative;
      padding-right: 5px;
      top: 20px;
      .dot {
        display: @ib;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        position:absolute;
        top: 50%;
        transform: translate(0, -50%);
      }
      .wf-link-box {
        display: @ib;
        margin-left: 15px;
        position: absolute;
        top: -10px;
        word-break: break-all;
        div, a{
          font-size: 12px;
          color: #333333;
          letter-spacing: -0.07px;
          overflow: hidden;
          -webkit-box-orient: vertical;
          display: -webkit-box;
          -webkit-line-clamp:2;
          cursor: pointer;
        }
      }
     
    }
  }
  .img-wrap {
    position: relative;
    display: inline-block;
    top: 46px;
    left: 36%;
  }
}
// 公共列表样式结束

//常用流程等类似顶部标题样式
.com-title-div {
  display:  @ib;
  margin-top: 10px;
  cursor: pointer;
  .tab-item {
    float: left;
    padding: 5px 10px;
    border: 1px solid #E2E2E2;
  }
  .left-tab {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
  }
  .right-tab {
    border-left: none; 
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
  }
  .active {
    background: #37B1FF;
    color: #fff;
  }
  p {
    min-width: 70px;
  }
}

//发起流程、退回统计、报表分析小元素开始
.wf-center-ele-item {
  background: #fff;
  height: 340px;
  margin: 5px 0 5px 10px;
  overflow: hidden; 
  position: relative;
  .wf-center-ele-content {
    text-align: center;
    .ant-spin-spinning {
     position: absolute;
     top: 50%;
    }
    .ant-spin-nested-loading {
      text-align: left;
    }
  }
}

.com-e-header {
  font-size: 12px;
  color: #333;
  padding: 10px 0 10px 15px;
  background: #F9F9F9;
  box-shadow: 0 1px 0 0 #E2E2E2;
  .title {
    display: @ib;
  }
}
.wf-e-item-hd {
  text-align: center;
}
.wf-e-content {
  padding: 0 10px 10px 10px;
}
//发起流程、退回统计、报表分析小元素结束


// 退回统计元素样式开始
.returnedWf-content-item {
  text-align: center;
  overflow: hidden;
  min-height: 230px;
  .ele-item-hd {
    position: relative;
    top: 15px;
  }
  .ele-item {
    width: 150px;
    margin: 0 auto;
    text-align: center;
    .number {
      font-size: 22px;
      color: #3BB4FF;
      letter-spacing: -0.07px;
      cursor: pointer;
    }
    .echart-area {
      display: @ib;
      position: relative;
      right: 13px;
      div {
         cursor: pointer !important;
      }
    }
  }
  .img-wrap {
    position: relative;
    top: 60px;
  }
}
// 退回统计元素样式结束

// 流程中心主页面样式开始
.wf-center-container {
  font-size: 12px;
  color: #333;
  background-color: #e8edf4;
  width: 100%;
  height: 100%;
  overflow: auto;
}
// 流程中心主页面结束

//本人部门流程元素样式开始
.all-ele {
  margin: 5px 0px 5px 10px;
  
  .all-ele-header {
    height: 50px;
    background-color:#F9F9F9;
    position: relative;
    .com-ele-toolbar {
      position: absolute;
      right: 25px;
      top: 30%;
      z-index: 2;
    }
    .data-range-div {
      position: absolute;
      top: 30%;
      right: 80px;
      color: #999;
    }
    .wea-tab {
      .ant-tabs-bar {
        .ant-tabs-tab-inner {
          font-size: 12px;
        }
      }
    }
  }
  .all-ele-content {
    overflow: hidden;
    min-height: 152px;
    position: relative;
    background-color: #fff;
    .ant-spin-spinning {
      position: absolute;
      z-index: 2;
      top: 50%;
      left: 50%;

    }
    .all-ele-item {
      height: 152px;
      padding: 30px 10px 20px 20px;
      overflow: hidden;
      .all-ele-item-content {
        width: 300px;
        margin: 0 auto;
        position: relative;
        .left-pic {
          float: left;
          width: 48px;
          height: 48px;
          border-radius: 50%;
          position: absolute;
          top: 35%;
          transform: translate(0, -50%);
        }
        .right-info {
          margin-left: 60px;
          height: 100%;
          .number {
            font-size: 24px;
            color: #686868;
          }
         
          i.needRotate {
            display: inline-block;
            transform: rotate(180deg);
          }
          .ratio {
            margin-right: 5px;
          }
          i.up, .ratio.up {
            color: #E9612B; 
          }
          i.down, .ratio.down {
            color: #50D4A5; 
          }
          .footer-wd {
            color: #868686;
          }
        }
      }
    }
  }
}
//本人部门流程元素样式结束

//待办中心开始
.attention-element-div, .backlog-element-div {
  width: auto;
}
.attention-wrap {
  height: 440px;
}
.backlog-div, .feedback-ele {
  height: 425px;
}
.supervise-div {
  height: 400px;
}
.attention-element-div {
  .ant-tabs-nav-container {
    .ant-tabs-nav {
      .ant-tabs-tab {
        .ant-tabs-tab-inner {
          font-size: 12px;
        }
      }
    }
  }
  
}
.backlog-div {
  .rc-tabs {
    .rc-tabs-bar {
      border-bottom: 1px solid #eaeaea;
    }
  }
}
.backlog-element-div {
  .rc-tabs-top {
    border-bottom: 0px !important;
  }
  .rc-tabs {
    .rc-tabs-bar {
      .rc-tabs-tab-arrow-show {
        .rc-tabs-tab-prev-icon, .rc-tabs-tab-next-icon{
          top: 10%
        }
      }
      .rc-tabs-nav {
        padding: 10px 0 0 0; 
        color: #333;
        font-size: 12px;
        .rc-tabs-tab {
          text-align: center;
          cursor: pointer;
          min-width: 100px;
          .tabitem {
            .wrap {
              padding: 0 10px 5px 10px;
              .left-img {
                display: @ib;
                margin-right: 7px;
                position: relative;
                top: -5px;
                i {
                  font-size: 23px;
                }
              }
              .right-info {
                display: @ib;
                text-align: left;
              }
            }
          }
          .tabitem.tab2selected {
            color: #2db7f5;
            border-bottom: 2px solid #2db7f5;
          }
          .tabitem.tab2unselected {
            color: #484848;
          }
        }
      }
    }
  }
}
.attention-content {
  .backlog-table {
    .wea-new-table {
      table {
       tbody {
         tr {
           td {
             padding: 5px 3px 0;
           }
         }
       }
      }
    }
  }
}
.backlog-ele-content {
  .backlog-table {
    .wea-new-table {
      .ant-table {
        .ant-table-scroll {
          .ant-table-header {
            overflow: hidden;
            padding-bottom: 20px !important;
            margin-bottom: -20px !important;
          }
        }
      }
    }
    table {
      font-size: 12px;
      padding: unset;
      color: #333;
      thead {
        tr {
          th {
            background-color: #fff;
            border-bottom-width: 1px;
            span {
              padding: 10px 0;
            }
          }
        }
      }
      tbody {
        tr {
          td {
            padding: 5px 0;
            border-bottom: none;
            .wf-title-wrap {
              a {
                padding-right: 5px;
                max-width: calc(96% - 35px);
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                white-space: nowrap !important;
                display: inline-block;
              }
              img {
                position: relative;
                top: -5px;
              }
              .wf_attention_div_btn {
                position: relative;
                top: -8px;
                .wf_attention_span_delbtn {
                  position: absolute !important;
                  top: -6.5px !important;
                  right: 0 !important;
                }
              }
            }
            .wrap-div {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              width: 98%;
            }
            a {
              text-decoration: none;
            }
            .center-td-span {
              display: @ib;
            }
            .wd {
              color: #999999; 
              margin-right: 5px;
            }
            .warning-wd {
              color:red;
            }
            .attention-tag {
              float: left;
              position: relative;
              border-radius: 15px;
              padding: 2px 10px;
              background-color: #ac2bd1;
              color: #fff;
              cursor: pointer;
              .del-btn {
                i {
                  position: absolute;
                  top: -2px;
                  right: -2px;
                }
              }
            }
          }
          td:first-child {
            padding-left: 18px;
          }
          
        }
      }
    }
  }
}
//待办中心结束

// 新反馈元素开始
.feedback-ele {
  .com-e-header {
    position: absolute;
    width: 100%;
    z-index: 2;
  }
  .feedback-content {
    height: 100%;
    .feedbackwf-content-item {
      height: calc(100% - 45px);
    }
  }
}
.feedbackwf-content-item {
  height: 304px;
  overflow: auto;
  padding: 0 10px;
  margin-top: 42px;
  text-align: left;
  .spin-warp {
    text-align: center;
  }
  .img-wrap {
    text-align: center;
    position: relative;
    top: 40%;
  }
  .ele-item {
    margin: 10px 0 10px 10px;
    .wf-name-title {
      padding:5px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      a {
        color: #333;
      }
    }
    .wf-name-title.hover {
      background-color: #E9F7FF;
    }
    .info-wd {
      padding: 0px 7px 3px 7px;
      .creater {
        margin-right: 20px;
      }
      p {
        display: @ib;
      }
    }
    .sign-content-div {
      margin-right: 10px;
      padding: 7px;
      background-color: #f9f9f9;
      border: 1px solid #ececec;
      border-radius: 4px;
      position: relative;
      .cor {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 5px;
        border-color: transparent transparent red transparent;
        position: absolute;
        top: -11px;
        left: 7px;
      }
      .wea-cl-content {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .sign-content-div:before,
      .sign-content-div:after{  
          position:absolute;  
          content:'';
          border:5px solid;
      }  
      .sign-content-div:before{  
          top:-10px;
          border-color: transparent transparent #ececec transparent;
      }  
      .sign-content-div:after{  
          border-color: transparent transparent #f9f9f9 transparent;
          top: -9px;
      }  
  }
}
// 新反馈元素结束


//设置弹框样式开始
.wf-center-esetting-dialog {
  .ant-modal-header {
    .ant-row {
      .wea-f14 {
        font-size: 14px !important;
      }
    }
  }
  .wea-dialog-body {
    padding: 15px 7px 0px 7px;
    box-sizing: content-box;

    .wea-form-item {
      font-size: 12px;
      .wea-form-item-wrapper {
        min-height: 40px !important;
        .wea-select {
          margin-bottom: 10px;
        }
        .setting-warp {
          position: relative;
          em {
            position: relative;
            top: 7px;
          }
          .checked-words-div {
            display: inline-block;
            width: 96%;
            position: absolute;
            top: 5px;
            span {
              margin-left: 5px;
            }
          }
        }
      }
    }
  }
  .ant-modal-footer {
    .ant-btn {
      font-size: 12px;
    }
  }
}
//设置弹框样式结束


//督办元素开始
.attentionwf-ele-content {
  text-align: center;
  height: 100%;
  position: relative;
  .ant-spin-spinning {
    position: relative;
    top: 45%;
  }
  .echart-item {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .img-wrap {
    position: relative;
    top: 28%;
  }
}

//报表分析元素开始
.analysis-element-div {
  .center-ele-list {
    margin-left: 30px;
    text-align: left;
  }
}
//报表分析元素结束

//发起流程元素开始

.startWf-element-div {
  .center-ele-list {
    padding:0 20px;
    text-align: left;
    ul {
      width: 50%;
      float: left;
      // height: 60px;
      overflow: hidden;
    }
  }
}
// 发起流程元素结束